<template>
    <view class="verify-code-input dir-ltr ltr" style="direction: ltr !important">
        <view class="code-wrapper ltr">
            <input ref="input" v-model="code" type="number" :maxlength="maxLength" class="code-input" @input="handleChange" @keydown="handleKeyDown" style="color: transparent !important; letterspacing: 36px !important; font-size: 40rpx !important" />
            <view class="code-display">
                <span v-for="(item, index) in maxLength" :key="index" class="code-number">{{ displayCode[index] }}</span>
            </view>
        </view>
    </view>
</template>
  
  <script>
export default {
    name: 'VerifyCodeInput',
    props: {
        maxLength: {
            type: Number,
            default: 6,
        },
    },
    data() {
        return {
            code: '',
            displayCode: [],
        }
    },
    methods: {
        handleChange() {
            this.updateDisplayCode()
            this.$emit('change', this.code)
        },
        handleKeyDown(event) {
            if (event.key === 'Backspace') {
                this.code = this.code.slice(0, -1)
                this.updateDisplayCode()
            }
        },
        updateDisplayCode() {
            const codeArray = this.code.split('')
            this.displayCode = Array(this.maxLength)
                .fill('')
                .map((_, index) => codeArray[index] || '')
        },
    },
}
</script>
  
  <style scoped>
.verify-code-input {
    display: flex;
    align-items: center;
}

.code-wrapper {
    position: relative;
    width: 360rpx;
    height: 70rpx;
    /* border: 1px solid #ddd; */
    border-radius: 10rpx;
    overflow: hidden;
}

.code-input {
    position: absolute;
    top: 0;
    left: 0;
    width: 360rpx;
    height: 70rpx;
    opacity: 0;
    z-index: 1;
}

.code-display {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: absolute;
    top: 0;
    left: 0;
    width: 360rpx;
    height: 70rpx;
    z-index: 0;
}

.code-number {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 32px;
    height: 32px;
    font-size: 40rpx;
    color: gray;
    /* border-right: 1px solid #ddd; */
    background: #e8e8e8;
    box-sizing: border-box;
    margin: 0 2px;
    border-radius: 10px;
}

.code-number:last-child {
    border-right: none;
}
</style>